import React from 'react';
import Backdrop from '@material-ui/core/Backdrop';
import CircularProgress from '@material-ui/core/CircularProgress';
import { makeStyles } from '@material-ui/core/styles';
import {connect} from 'react-redux'

const useStyles = makeStyles((theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: '#fff',
  },
}));

function Loading(props) {
  const classes = useStyles();

  return (
    <div>
      <Backdrop className={classes.backdrop} open={props.showLoading} onClick={props.closeLoadingFn}>
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
}

const mapStateToProps = (state) => {
    return {
        showLoading: state.showLoading
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        closeLoadingFn(){
            dispatch({type: "closeLoading"});
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Loading);